<template>
  <div>
    <Calendar v-model="value">
      <template #month="{ date, data }">
        <div @click="show(data.day)" style="width:130px;height:99px">
          <!-- 显示待办 -->
          <span style="white-space: pre-wrap;left: 30px;text-align: center;color:#FF6200;">
            {{ showTotal(data.day) }}
          </span>
          <span style="white-space: pre-wrap;left: 30px;text-align: center;color:#3291F8 ;">
            {{ showTotal2(data.day) }}
          </span>
        </div>
      </template>
    </Calendar>
  </div>
  <showToDoList v-model="visible"></showToDoList>
</template>
<script>
import axios from 'axios'
import userCount from '@/stores/userCount.js'
import showToDoList from '@/views/Form/showToDoList.vue'
import { computed } from "vue";
export default {
  data() {
    return {
      user: userCount(),
      visible: false,
      todaylist: [],
      ok: 0,
      notok: 0,
      type: {
        month: '月',
        year: '年'
      },
      showTotal(day) {
        const arr = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day)
        const arr1 = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day).filter(item => item.status == "1")
        if (arr.length > 0) {
          return '待办:' + (arr.length - arr1.length)
        } else {
          return ''
        }

      },

      showTotal2(day) {
        const arr = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day)
        const arr1 = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day).filter(item => item.status == "1")
        if (arr.length > 0) {
          return '\n' + '' + '完成:' + arr1.length
        } else {
          return ''
        }

      }
    }
  },
  methods: {
    show(day) {
      this.visible = true
      this.user.day = day
      axios.post('http://8.130.43.203:8080/content/findTodayList',
        { "userId": this.user.userid, "startDate": day }).then(resp => {
          this.user.todaylist = resp.data
        })
    }
  },

  components: {
    showToDoList
  }
}
</script>
